<p-tabView>
    <p-tabPanel header="分组字段" leftIcon="pi pi-calendar">
        <div class="button-item">
            <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdateGroupField()"
                label="保存"></button>
            <button pButton type="text" icon="fa fa-plus" (click)="addGroupField()" label="添加"></button>
        </div>
        <p-table [columns]="groupCols" [value]="groups" [scrollable]="true" [reorderableColumns]="true"
            [scrollHeight]="'calc(100vh - 245px)'">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th style="width:2.5em"></th>
                    <th *ngFor="let col of columns" [ngStyle]="col.style">
                        {{col.header}}
                    </th>
                    <th style="width:2.5em"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
                <tr [pReorderableRow]="index">
                    <td style="width:2.5em">
                        <i class="fa fa-bars" pReorderableRowHandle></i>
                    </td>
                    <ng-container *ngFor="let col of columns;">
                        <td *ngIf="col.field == 'fieldDisplayName' " [ngStyle]="col.style">
                            {{rowData[col.field]}}
                        </td>
                        <!-- 是否小计 -->
                        <td pEditableColumn *ngIf="col.field == 'sumFlag'" [ngStyle]="col.style">
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                                </ng-template>
                                <ng-template pTemplate="output">
                                    <p-inputSwitch [(ngModel)]="rowData[col.field]"></p-inputSwitch>
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <!-- 表头信息 -->
                        <td pEditableColumn *ngIf="col.field == 'tableHeader'" [ngStyle]="col.style">
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input pInputText type="text" [(ngModel)]="rowData[col.field]"
                                        placeholder="表头存在多级可使用“/”分割">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData[col.field]}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                    </ng-container>
                    <td style="width:2.5em">
                        <i class="fa fa-times" (click)="deleteGroupField(rowData)"></i>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </p-tabPanel>
    <p-tabPanel header="汇总字段" leftIcon="pi pi-inbox">
        <div class="button-item">
            <button pButton type="text" class="ui-button-success" icon="fa fa-check" (click)="saveUpdateSummaryField()"
                label="保存"></button>
            <button pButton type="text" icon="fa fa-plus" (click)="addSummaryField()" label="添加"></button>
        </div>
        <p-table [columns]="summaryCols" [value]="summaries" [scrollable]="true" [scrollHeight]="'calc(100vh - 245px)'">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns" [ngStyle]="col.style">
                        {{col.header}}
                    </th>
                    <th style="width:2.5em"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
                <tr>
                    <ng-container *ngFor="let col of columns;">
                        <!-- 字段名称 -->
                        <td *ngIf="col.field == 'fieldDisplayName'" [ngStyle]="col.style">
                            {{rowData[col.field]}}
                        </td>
                        <!-- 控件类型 -->
                        <td *ngIf="col.field == 'subType'" [ngStyle]="col.style">
                            <p-dropdown [options]="summaryTypes" [(ngModel)]="rowData.subType"
                                [style]="{'width':'100%', 'border': 'none', 'border-radius': '0px'}" appendTo="body">
                            </p-dropdown>
                        </td>
                        <!-- 反查标记 -->
                        <td pEditableColumn *ngIf="col.field == 'detailFlag'" [ngStyle]="col.style">
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <p-inputSwitch [(ngModel)]="rowData['detailFlag']"></p-inputSwitch>
                                </ng-template>
                                <ng-template pTemplate="output">
                                    <p-inputSwitch [(ngModel)]="rowData['detailFlag']"></p-inputSwitch>
                                </ng-template>
                            </p-cellEditor>
                        </td>
                        <!-- 表头信息 -->
                        <td pEditableColumn *ngIf="col.field == 'tableHeader'" [ngStyle]="col.style">
                            <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <input pInputText type="text" [(ngModel)]="rowData[col.field]"
                                        placeholder="表头存在多级可使用“/”分割">
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{rowData[col.field]}}
                                </ng-template>
                            </p-cellEditor>
                        </td>
                    </ng-container>
                    <td style="width:2.5em">
                        <i class="fa fa-times" (click)="deleteSummaryField(rowData)"></i>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </p-tabPanel>
</p-tabView>